<template>
  <div class="main">
    <div class="table">
      <el-table
        v-if="feedback"
        :data="currentContent"
        stripe
        height="100%"
        :default-sort="{
          prop: ['created_date', 'reply_date'],
          order: 'descending',
        }"
        header-cell-class-name="th"
        row-class-name="row"
      >
        <el-table-column
          align="center"
          prop="created_date"
          label="反馈时间"
          sortable
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="feedback_content"
          label="我的意见"
          width="550"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="reply_date"
          label="回复时间"
          width="200"
          sortable
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="reply_content"
          label="管理员回复"
          width="550"
        >
        </el-table-column>
        <el-table-column align="center" label="回复评价" width="280">
          <template slot-scope="scope">
            <div v-if="scope.row.reply_content">
              <div class="block">
                <span class="demonstration"></span>
                <el-rate
                  v-model="scope.row.rate"
                  :allow-half="true"
                  :disabled="scope.row.confirm ? true : false"
                ></el-rate>
              </div>
              <el-button
                size="medium"
                type="primary"
                v-if="!scope.row.confirm"
                @click="rate(scope.row, scope.$index)"
                >确定</el-button
              >
            </div>
            <div v-else style="font-size: 14px; color: grey">
              管理员尚未回复,无法评价
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="total"
      :pager-count="5"
      style="text-align: center"
      @current-change="changeIdx"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getMyFeedback, judgeAnswer } from "@network/student";
export default {
  data() {
    return {
      feedback: null,
      total: 0,
      activeIndex: 0,
      line: 10,
    };
  },
  computed: {
    currentContent() {
      let begin = this.activeIndex * this.line,
        end = (this.activeIndex + 1) * this.line;
      console.log(
        this.feedback.slice(this.activeIndex * this.line, this.line),
        "index"
      ),
        this.activeIndex;
      return this.feedback.slice(begin, end);
    },
  },
  methods: {
    changeIdx(idx) {
      this.activeIndex = idx - 1;
      console.log(
        "changeIdx",
        this.activeIndex,
        this.feedback,
        this.feedback.slice(this.activeIndex * this.line, this.line)
      );
    },
    getFeedback() {
      getMyFeedback().then((res) => {
        if (res.data.tag) {
          this.feedback = res.data.data;
        } else {
          this.$message.error("获取意见失败");
        }
      });
    },
    rate(feedback, index) {
      this.$set(this.feedback[index], "confirm", true);
      let { rate } = feedback;
      judgeAnswer({ feedback_id: feedback.id, rate }).then((res) => {
        if (res.data.tag) {
          this.$message.success("评价成功");
        } else {
          this.$message.error("评价失败");
        }
      });

      console.log(feedback, index, "1");
    },
  },
  activated() {
    this.getFeedback();
  },
};
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 88vh;
}

.table {
  height: 760px;
  overflow: auto;
}

/deep/ .row {
  font-size: 16px;
  height: 70px;
  box-sizing: border-box;
  width: 100%;
}

/deep/ .th {
  height: 60px;
}

/* @media screen and (max-width: 480px) {
  /deep/ .row {
    font-size: 16px;
    height: 70px;
    box-sizing: border-box;
    width: 80vw;
  }
} */
</style>
